<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>租车注册页面</title>
    <link rel="stylesheet" href="/car_rental/u/css/register.css">
    <script src="/car_rental/u/js/jquery-3.7.1.min.js"></script>
</head>
<body>

<div class="container">
    <div class="logo">
        <img src="/car_rental/u/images/logo.png" alt="租车标志"> <!-- Logo图片 -->
    </div>
    <h2>租车注册</h2>
    <form action="/car_rental/registerUserServlet" method="post">
        <div class="input-group">
            <label for="username">用户名：<span id="myspan" style="color: red"></span></label>
            <img src="/car_rental/u/images/icon.png" alt="用户图标">
            <input type="text" id="username" name="username" required>
        </div>

        <div class="input-group">
            <label for="password">密码：</label>
            <img src="/car_rental/u/images/icon.png" alt="密码图标">
            <input type="password" id="password" name="password" required>
        </div>

        <div class="input-group">
            <label for="name">姓名：</label>
            <img src="/car_rental/u/images/icon.png" alt="姓名图标">
            <input type="text" id="name" name="name" required>
        </div>

        <div class="input-group">
            <label for="email">邮箱：</label>
            <img src="/car_rental/u/images/icon.png" alt="邮箱图标">
            <input type="email" id="email" name="email">
        </div>

        <div class="input-group">
            <label for="phone">电话：</label>
            <img src="/car_rental/u/images/icon.png" alt="电话图标">
            <input type="tel" id="phone" name="phone">
        </div>
        <%--        <button>注册</button>--%>
        <input class="button" type="button" value="注册">
    </form>
    <div class="footer">
        已有账号？ <a href="login.jsp">登录这里</a>
    </div>
</div>

</body>
<script>
    $(function () {
        $("#username").blur(function () {
            checkUsername($(this).val());
        });
        $(".button").click(function () {
            register();
        });
    });

    //注册
    function register() {
        $.get("/car_rental/registerUserServlet", {
            'username': $("#username").val(),
            'password': $("#password").val(),
            'name': $("#name").val(),
            'email': $("#email").val(),
            'phone': $("#phone").val()
        }, function (data) {
            if ("注册成功" == data.meg) {
                $(".container").empty();
                $(".container").append('<div class="logo"> <img src="/car_rental/u/images/logo.png" alt="租车标志"></div>');
                $(".container").append("<h1><a href='login.jsp'>注册成功点击返回登录</a></h1>")
            } else {
                $(".container").empty();
                $(".container").append('<div class="logo"> <img src="/car_rental/u/images/logo.png" alt="租车标志"></div>');
                $(".container").append("<h1><a href='register.jsp'>注册失败点击重新注册</h1>")
            }
        });
    }

    //验证username是否存在
    function checkUsername(username) {
        $.get("/car_rental/validateUserServlet", {'username': username}, function (data) {
            if (data.state) { //存在不可以注册
                $("#myspan").text('用户名太受欢迎换一个~');
            } else {
                $("#myspan").text('');
            }
        })
    };
</script>
</html>